import React, { FC, useEffect, useState } from 'react'
import ChartLine from '@/components/pages/chartLine'
import ChartPie from '@/components/pages/chartPie'
import FinanceCount from './saleCount'
import ChartBtn from './chartBtn'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { IFinanceFull } from '@/types/pages/finance/interface'
import { inject, observer } from "mobx-react";
import frame_url from '@/assert/images/bg_big.png'
import bg_verticle_url from '@/assert/images/bg_verticle.png'
import income_url from '@/assert/images/finance/income.png'
import profit_url from '@/assert/images/finance/profit.png'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction:column;
      background-image: url(${frame_url});
      background-size: 100% 100%;
      .finance{
        flex:1 1 60%;
        display: flex;
        flex-direction: row;
        .finance-left{
          flex:1;
          display: flex;
          flex-direction: column;
          .finance-money:before{
            content: '';
            position: absolute;
            width: 41.5rem;
            height: 25.5rem;
            top:60%;
            left:51%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }
          .finance-count:before{
            content: '';
            position: absolute;
            width: 41.5rem;
            height: 15.5rem;
            top:60%;
            left:51%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }

          .finance-count,.finance-money{
            position: relative;
            flex:1
          }
          .finance-money{
            height: 80%;
          }
        }
        .finance-right:before{
            content: '';
            position: absolute;
            width: 40.5rem;
            height: 47.5rem;
            top:60%;
            left:50%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }
        .finance-right{
          position: relative;
          flex:1;
        }

      }

      .income-chart{
        flex:1 1 40%;
      }

    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column;
      background-image: url(${frame_url});
      background-size: 100% 100%;
      .finance{
        flex:1 1 60%;
        display: flex;
        flex-direction: row;
        .finance-left{
          flex:1;
          display: flex;
          flex-direction: column;
          .finance-money:before{
            content: '';
            position: absolute;
            width: 43.5rem;
            height: 25.5rem;
            top:60%;
            left:49.5%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }
          .finance-count:before{
            content: '';
            position: absolute;
            width: 43.5rem;
            height: 15.5rem;
            top:60%;
            left:49.5%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }
          .finance-count,.finance-money{
            position: relative;
            flex:1
          }
        }
        .finance-right:before{
            content: '';
            position: absolute;
            width: 43.5rem;
            height: 47.5rem;
            top:60%;
            left:50%;
            transform: translate(-50%,-50%);
            background-color: rgba(6,31,79,0.5);
            border:1px solid #0A4F89;
          }
        .finance-right{
          position: relative;
          flex:1;
        }

      }

      .income-chart{
        flex:1 1 40%;
      }
    }
`


const Content: FC<{}> = function () {
  const store = useStores();
  const { profit, incomePie, incomeTypePie,
    profitPie, profitTypePie, incomeLine, profitLine,
    income } = store.finance.screenData;
  const fnCallBack: FnCallBack = (data: Partial<IFinanceFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('财务分析');
    document.title = '财务分析';
  };
  useEffect(() => {
    store.finance.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.finance.getScreenData(type, date)
      fnCallBack<Partial<IFinanceFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='finance'>
          <div className='finance-left'>
            <div className='finance-count'>
              <FinanceCount name={income.name}
                unit={income.unit}
                totalNum={income.totalNum}
                image={income_url}
                num={income.num}
                saleRate={income.saleRate}
                comparisonText={income.comparisonText} upDownStatus={income.upDownStatus} />
            </div>
            <div className='finance-money'>
              <ChartPie style={{backgroundImage:"none",paddingTop:'0rem'}} title={incomePie.title!} dataset={incomePie.dataset} />
            </div>
          </div>
          <div className='finance-right'>
            <ChartPie style={{backgroundImage:"none"}}  title={incomeTypePie.title!} dataset={incomeTypePie.dataset} />
          </div>

        </div>
        <div className='income-chart'>
          <ChartLine style={{backgroundImage:"none"}} title={incomeLine.title!} dataset={incomeLine.dataset!} />
        </div>
      </div>
      <div className='right'>
      <div className='finance'>
          <div className='finance-left'>
            <div className='finance-count'>
              <FinanceCount name={profit.name}
                unit={profit.unit}
                totalNum={profit.totalNum}
                image={profit_url}
                num={profit.num}
                saleRate={profit.saleRate}
                comparisonText={profit.comparisonText} upDownStatus={profit.upDownStatus} />
            </div>
            <div className='finance-money'>
              <ChartPie style={{backgroundImage:"none",paddingTop:'-5rem'}} title={profitPie.title!} dataset={profitPie.dataset} />
            </div>
          </div>
          <div className='finance-right'>
            <ChartPie style={{backgroundImage:"none"}} title={profitTypePie.title!} dataset={profitTypePie.dataset} />
          </div>

        </div>
        <div className='income-chart'>
          <ChartLine style={{backgroundImage:"none"}} title={profitLine.title!} dataset={profitLine.dataset!} />
        </div>
      </div>

    </ContentFrame>
  )
}

export default observer(Content)
